<template>
  <!-- 产品管理 -->
  <div class="quality" v-if="detail">
    <div class="quality-list">
      <div class="quality-item" ref="tx">
        <div class="quality-item_pc" v-html="detail?.tx?.contentweb"></div>
        <div
          class="quality-item_mobile"
          v-html="detail?.tx?.contentmobile"
        ></div>
      </div>
      <div class="quality-item" ref="zd">
        <div class="quality-item_pc" v-html="detail?.zd?.contentweb"></div>
        <div
          class="quality-item_mobile"
          v-html="detail?.zd?.contentmobile"
        ></div>
      </div>
      <div class="quality-item" ref="zx">
        <div class="quality-item_pc" v-html="detail?.zx?.contentweb"></div>
        <div
          class="quality-item_mobile"
          v-html="detail?.zx?.contentmobile"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  computed: {
    ...mapGetters("common", ["getNavInfo"]),
  },
  data() {
    return {
      detail: null,
    };
  },
  beforeRouteEnter(to, from, next) {
    next(async (vm) => {
      console.log("a");
      await vm.getData();
      // 滚动到指定位置
      await vm.scrollTo();
    });
  },
  created() {},
  async mounted() {
    // await this.getData();
    // // 滚动到指定位置
    // await this.scrollTo();
  },
  methods: {
    async getData() {
      try {
        //获取文图
        const result = await this.$request.get(
          "/productquality/qualityManagement",
          {
            params: {
              cid: this.getNavInfo("productMannage").id,
            },
          }
        );

        // 设置数据
        this.detail = result.data;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    /**
     * 位置
     */
    async scrollTo(route) {
      console.log(route);
      if (this.$route.query.name) {
        // 等待dom加载完毕后执行
        await this.$nextTick();

        setTimeout(() => {
        // 通过形参获取当前需要的dom
        const targetbox = this.$refs[this.$route.query.name];
        console.log(targetbox);
        // targetbox.

        // 滚动到目标位置
        targetbox.scrollIntoView({ behavior: "smooth" });

        // window.scrollTo(0, targetbox.offsetTop);
        }, 2000);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.quality {
  // width: 1920px;
  min-height: 100vh;

  &-list {
    padding-top: 60px;
    width: 1200px;
  }

  &-item {
    &_pc {
      display: block;
    }

    &_mobile {
      display: none;
    }
  }
}
</style>
<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .quality {
    &-list {
      padding-top: fn.rpx(60);
      width: fn.rpx(750);
    }

    &-item {
      &_pc {
        display: none;
      }

      &_mobile {
        display: block;
      }
    }
  }
}
</style>